<template>
  <div class="all">
    <img src="/static/imgs/index/indexT.png" alt="" class="indexT">
    <div class="news">
     <div class="newsTxt">我的英雄</div>
    </div>
    <div class="top">
      <div class="head">
        <img src="/static/imgs/index/nohead.jpg" alt="" class="headPic">
        <div class="headName">你的名字</div>
      </div>
      <div class="money">
        <div>
          <div class="moneyL">
            <div class="moneyNum">12345</div>
          </div>
          <div class="moneyR">
            <div class="moneyNum">{{ethMoney}}</div>
            <img src="/static/imgs/index/add.png" alt="" class="addPic">
          </div>
        </div>
        <div class="moneyB">
          <div class="moneyBTxt">12321</div>
        </div>
      </div>
    </div>
   <div v-if="$store.state.extract">
     <img src="/static/imgs/hero/tanBg.png" alt="" class="tanBg">
     <img src="/static/imgs/hero/hasMoney.png" alt="" class="hasMoney" v-if="$store.state.hasMoney">
     <img src="/static/imgs/hero/noMoney.png" alt="" class="hasMoney" v-if="$store.state.noMoney">
     <div class="closeMoney" @click="tanClose"></div>
     <div class="go" id="go" v-if="$store.state.hasMoney" @click="goBuyHero"></div>
     <div class="go" id="go1" v-if="$store.state.noMoney" @click="goBuyMoney"></div>
   </div>
    <div class="bom" id="bom">
      <router-link to="/">
        <img src="/static/imgs/index/index.png" alt="">
      </router-link>
      <router-link to="/hero">
        <img src="/static/imgs/index/hero.png" alt="">
      </router-link>
      <router-link to="/pkindex">
        <img src="/static/imgs/index/pk.png" alt="">
      </router-link>
      <router-link to="/mine">
        <img src="/static/imgs/index/mine.png" alt="">
      </router-link>
    </div>
  </div>
</template>

<script>
  import api from '@/api'
  import { Indicator, Toast } from 'mint-ui'
export default {
  name: 'tab',
  data () {
    return {
      ethMoney: ''
    }
  },
  methods : {
    tanClose () {
      this.$store.commit('closeExtract');
    },
    goBuyMoney () {
      this.$router.push({path: '/mine'});
    },
    goBuyHero () {
      let that = this;
      let totalSango = null;
      let birth = null;
      let owner = null;
      Indicator.open({
        spinnerType: 'fading-circle'
      });
      App.buy();
      api.instance.totalSupply(function(err,res){
        totalSango = res.toNumber();
        console.log(totalSango);
      });
      let timer = setInterval(function () {
        api.instance.Birth(function (error,result) {
          if (!error)
            birth = result.args.sangoId.toNumber();
            owner = result.args.owner;
          api.instance.getSango(result.args.sangoId.toNumber(),function(error,result){
            if(error){
              Toast('没有武将信息');
            }else{
             if(totalSango !== birth && owner === api.defaultAccount){
               clearInterval(timer);
               Indicator.close();
              console.log(result.toString());
              that.$store.commit('closeExtract');
              that.$router.push({path: '/extractAgain', query:{data: result.toString()}});
             }
            }
          });
        })
      },1500)
    }
  },
  mounted () {
    App.init();
    let that = this;
    let ethmoney = api.web3.eth.getBalance(api.defaultAccount);
    ethmoney = web3.toBigNumber(ethmoney).toNumber().toString();
    ethmoney = parseInt(ethmoney.substring(0,ethmoney.length-15))/1000;
    that.ethMoney = ethmoney;
    this.$nextTick(() =>{
      // 在这里面去获取DOM

    })
  }
}
</script>

<style scoped  lang="less">
.all{
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  .indexT{
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 8;
    height: 13%;
  }
  .news{
    height: 5%;
    background-image: url("/static/imgs/index/news.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    z-index: 9;
    .newsTxt{
      color: white;
      font-size: 1rem;
      height: 100%;
      line-height: 1.7rem;
      width: 80%;
      margin-left: 10%;
    }
  }
  .top{
    height: 18%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 9;
    top:5%;
    .head{
      width: 28.8%;
      float: left;
      height: 100%;
      background-image: url("/static/imgs/index/head.png");
      background-size: 100%;
      background-repeat: no-repeat;
      margin-left: 7%;
      .headPic{
        width: 73%;
        border-radius: 50%;
        margin-left: 12%;
        margin-top: 8%;
      }
      .headName{
        color: white;
        font-size: 1rem;
        width: 80%;
        margin-left: 8%;
        margin-top: -1%;
        text-align: center;
      }
    }
    .money{
      float: left;
      width: 60%;
      height: 100%;
      margin-left: 2%;
      .moneyL{
        float: left;
        width: 40.8%;
        height: 44%;
        background-image: url("/static/imgs/index/moneyL.png");
        background-size: 100% 18px;
        background-repeat: no-repeat;
        margin-top: 3%;
        border-radius: 20px;
        .moneyNum{
          color: white;
          font-size: 0.8rem;
          margin-left: 20%;
          line-height: 1.4rem;
        }
      }
      .moneyR{
        float: left;
        width: 40.8%;
        height: 36%;
        background-image: url("/static/imgs/index/moneyR.png");
        background-size: 100% 18px;
        background-repeat: no-repeat;
        margin-top: 3%;
        margin-left: 12%;
        border-radius: 20px;
        position: relative;
        .addPic{
          height: 100%;
          right: 0;
          position: absolute;
          top:0;
        }
        .moneyNum{
          color: #c98422;
          font-size: 0.8rem;
          margin-left:20%;
          line-height: 1.4rem;
        }
      }
      .moneyB{
        width: 60%;
        background-image: url("/static/imgs/index/moneyB.png");
        background-size: 100%;
        background-repeat: no-repeat;
        margin-left: -5%;
        position: relative;
        .moneyBTxt{
          color: white;
          position: absolute;
          width: 80%;
          left: 57%;
          font-size: 1.5rem;
          top: -7%;
        }
      }
    }
    .money>div{
      height: 38%;
    }
  }
  .tanBg{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    z-index: 4;
  }
  .hasMoney{
    width: 87%;
    position: absolute;
    top:30%;
    z-index: 9;
    left: 7.5%;
  }
  .closeMoney{
    width: 13%;
    height: 8%;
    position: absolute;
    top:30%;
    z-index: 10;
    right: 6.5%;
    border-radius: 50%;
  }
  .go{
    width: 28%;
    height: 7%;
    position: absolute;
    top:55%;
    z-index: 10;
    left: 36%;
  }
  .bom{
    height: 14%;
    width: 100%;
    background-image: url("/static/imgs/index/tabBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    z-index: 9;
  }
  .bom img{
    height: 70%;
    margin-top: 7%;
    margin-left: 5%;
    max-width: 19.5%;
  }
}
@media screen and (min-height: 740px)  and (min-width: 360px){
  #bom img{
    margin-top: 9%;
  }
  #go{
    top:50%;
  }
  #go1{
    top:50%;
  }
}
</style>
